<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('新增请假')"/>
        <th:block th:include="include :: datetimepicker-css"/>
        <style>
            .pictureImgsItem {
                width: 100px;
                height: 100px;
                background-color: #eaeaea;
                position: relative;
                margin-top: 20px;
            }

            .pictureImgs {
                width: 100px;
                height: 100px;
            }

            .close {
                font-size: 18px;
                position: absolute;
                top: -8px;
                right: -7px;
                cursor: pointer;
            }
        </style>
    </head>
    <body class="white-bg">
        <div class="wrapper wrapper-content animated fadeInRight ibox-content">
            <form class="form-horizontal m" id="form-leave-add" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="col-sm-3 control-label">流程类别名称：</label>
                    <div class="col-sm-8">
                        <select name="flowCategoryInfo.id" id="flowCategoryInfoName" class="form-control" required>
                            <option value="">-请选择-</option>
                            <option th:each="flowCategoryInfo : ${flowCategoryInfoList}" th:text="${flowCategoryInfo.name}" th:value="${flowCategoryInfo.id}"></option>
                        </select>
                        <span class="help-block m-b-none"><i class="fa fa-info-circle" id="flowCategoryInfoWar"></i></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">请假开始时间：</label>
                    <div class="col-sm-8">
                        <input name="beginDate" id="beginDate" class="form-control" placeholder="yyyy-MM-dd" autocomplete="off" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">请假结束时间：</label>
                    <div class="col-sm-8">
                        <input name="finishDate" id="finishDate" class="form-control" placeholder="yyyy-MM-dd" autocomplete="off" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">请假天数：</label>
                    <div class="col-sm-8">
                        <input id="leaveDays" class="form-control" type="text" value=" 0 天" autocomplete="off" readonly>
                        <input name="leaveDays" class="form-control" type="hidden" value=" 0 天" disabled>
                        <span class="help-block m-b-none" id="msg"><i class="fa fa-info-circle"></i>鼠标悬浮可查看天数详情</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">请假原因：</label>
                    <div class="col-sm-8">
                        <textarea name="reason" class="form-control" required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">请假证明:</label>
                    <div class="col-sm-8">
                        <input id="picture" type="file" name="leavePic" class="form-control" accept="image/*"/>
                        <div class="pictureImgsItem">
                            <img class="pictureImgs" alt="请假证明">
                            <i class="close fa fa-close"></i>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: datetimepicker-js"/>

        <script th:inline="javascript">
            var prefix = ctx + "oa/leave";
            $(".pictureImgsItem").hide();

            //选择图片
            $("#picture").change(function () {
                var rd = new FileReader();//创建文件读取对象
                var files = this.files[0];//获取file组件中的文件
                rd.readAsDataURL(files);
                rd.onloadend = function (e) {
                    //加载完毕之后获取结果赋值给img
                    $(".pictureImgs").attr("src", this.result);
                    $(".pictureImgsItem").show();
                }
            });

            //点击图片右上方关闭清除图片值
            $(".close").click(function () {
                $("#picture").val(null);
                $(".pictureImgsItem").hide();
                console.log($("input[name='picture']").val());
            })

            //提交
            function submitHandler() {
                var form = document.getElementById("form-leave-add");
                var formData = new FormData(form);
                if ($.validate.form()) {
                    $.operate.saveFile(prefix + "/add", formData);
                }
            }

            //获取所有调休时间
            var holidayWorking = {};
            var holidayWorkingDates = [[${holidayWorkingDate}]];
            for (let i = 0; i < holidayWorkingDates.length; i++) {
                holidayWorking[$.common.formatterDate('date', holidayWorkingDates[i].date)] = "调休";
            }

            //后台获取的最小天数
            var minDays;

            //双层判断开始时间
            var jsBeginDate;

            //记录请假天数详情
            var leaveDayDetail = null;

            $().ready(function () {
                //鼠标悬浮可查看请假天数详情
                $("#leaveDays").mouseover(function () {
                    if (leaveDayDetail != null && leaveDayDetail != '') {
                        var data = leaveDayDetail.split("`:");
                        var title = "休息日:" + data[0] + "天\n" +
                            "调休日:" + data[1] + "天";
                        //提示
                        layer.tips(title, "#leaveDays", {
                            tips: 1
                        });
                    }
                });
            })

            //选择时间
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                var ins1 = laydate.render({
                    elem: '#beginDate'
                    , min: Date()
                    , calendar: true
                    , isInitValue: false
                    , mark: holidayWorking
                    , ready: function (date) {
                        //判断是否已选择流程类别
                        if ($("#flowCategoryInfoName").val() == null || $("#flowCategoryInfoName").val() == '') {
                            $.modal.msgWarning("请选择流程类别名称");
                            $('#layui-laydate1').remove();
                        }
                    }, done: function (value, dates, endDate) {
                        jsBeginDate = value;
                        //设置结束时间的初始值
                        if (minDays != null) {
                            $.ajax({
                                url: prefix + "/getSpecialTime",
                                type: 'POST',
                                async: true,
                                data: {"date": value, "days": minDays},
                                dataType: 'json',
                                success: function (result) {
                                    $("#finishDate").val(result.msg)

                                    ins2.config.value = result.msg;
                                    //设置结束时间的最小时间
                                    ins2.config.min = {
                                        year: new Date(result.msg).getFullYear(),
                                        month: new Date(result.msg).getMonth(),
                                        date: new Date(result.msg).getDate()
                                    }

                                    $.ajax({
                                        url: prefix + "/getLeaveDays",
                                        type: 'POST',
                                        async: true,
                                        data: {
                                            "id": $("#flowCategoryInfoName").val(),
                                            "startTime": $("#beginDate").val(),
                                            "endTime": $("#finishDate").val()
                                        },
                                        dataType: 'json',
                                        success: function (result) {
                                            leaveDayDetail = result.msg;
                                            var data = result.msg.split("`:");
                                            if (result.code == 0) {
                                                $("#leaveDays").val(" " + data[2] + " 天");
                                                $("input[name='leaveDays']").val(data[2]);
                                            } else if (result.code == 301) {
                                                $("#leaveDays").val("0 天");
                                                $.modal.alertWarning(result.msg);
                                            }
                                        }
                                    });
                                }
                            });
                        } else {
                            //设置结束时间的最小时间
                            ins2.config.min = {
                                year: dates.year,
                                month: dates.month - 1,
                                date: dates.date
                            }
                        }


                    }
                });


                var ins2 = laydate.render({
                    elem: '#finishDate'
                    , calendar: true
                    , isInitValue: false
                    , mark: holidayWorking
                    , ready: function (date) {
                        if (jsBeginDate == null || $("#beginDate").val() == null || $("#beginDate").val() == '') {
                            $.modal.msgWarning("请先选择假期开始时间");
                            $('#layui-laydate2').remove();
                        }
                    }, change: function (value, date, endDate) {
                        //判断是否选中的是本年的
                        var startTime = new Date($("#beginDate").val()).getFullYear();
                        var endTime = new Date(value).getFullYear();
                        var d = new Date().getFullYear();
                        if (startTime != d && endTime != d) {
                            ins1.hint("请选择本年时间"); //在控件上弹出value值
                        }
                    }, done: function (value, date, endDate) {

                        //向后台提交获取区间多少天
                        $.ajax({
                            url: prefix + "/getLeaveDays",
                            type: 'POST',
                            async: true,
                            data: {
                                "id": $("#flowCategoryInfoName").val(),
                                "startTime": $("#beginDate").val(),
                                "endTime": value
                            },
                            dataType: 'json',
                            success: function (result) {
                                console.log(result);
                                leaveDayDetail = result.msg;
                                var data = result.msg.split("`:");
                                console.log(data[2])
                                if (result.code == 0) {
                                    $("#leaveDays").val(" " + data[2] + " 天");
                                    $("input[name='leaveDays']").val(data[2]);
                                } else if (result.code == 301) {
                                    $("#leaveDays").val("0 天");
                                    $.modal.alertWarning(result.msg);
                                }
                            }
                        });


                    }
                });


                //获取假期分类的请假设置
                $("#flowCategoryInfoWar").hide();
                $("#msg").hide();
                $("#flowCategoryInfoName").change(function () {
                    if ($.common.isEmpty($(this).val())) {
                        $("#flowCategoryInfoWar").hide();
                        return;
                    }
                    $.ajax({
                        url: prefix + "/getLeaveSetting",
                        type: 'POST',
                        async: true,
                        data: {
                            "id": $("#flowCategoryInfoName").val()
                        },
                        dataType: 'json',
                        success: function (result) {
                            $("#leaveDays").val("0 天");
                            laydate.render(ins1);
                            laydate.render(ins2);
                            $("#beginDate").val(null)
                            $("#finishDate").val(null)
                            minDays = null;
                            //如果没有设置就隐藏
                            if (result.msg == "0") {
                                $("#flowCategoryInfoWar").hide();
                                $("#msg").show();
                            } else if (result.msg != "0") {
                                $("#msg").hide();
                                $("#flowCategoryInfoWar").show();
                                var datas = result.msg.split("`:");
                                $("#flowCategoryInfoWar").text(datas[0]);
                                minDays = datas[1];
                            }
                        }
                    });
                })
            });
        </script>
    </body>
</html>